<template>
	<view class="preview">

		<image :src="goods.smallPicurl" mode="aspectFill" @click="maskChange"></image>

		<view class="mask" v-if="maskState">

			<view class="goBack" :style=" {top: getStatusBarHeight() + 'px'} " @click="goBack">
				<uni-icons type="back" size="20" color="#fff"></uni-icons>
			</view>

			<view class="time">
				<uni-dateformat :date="new Date()" format="hh:mm"> </uni-dateformat>
			</view>
			<view class="date">
				<uni-dateformat :date="new Date()" format="MM月dd日"> </uni-dateformat>
			</view>

			<view class="footer">
				<view class="box" @click="clickInfo">
					<uni-icons type="info" size="28"></uni-icons>
					<view class="text">信息</view>
				</view>
				<view class="box" @click="clickScore">
					<uni-icons type="star" size="28"></uni-icons>
					<view class="text">{{goods.score}}分</view>
				</view>
				<view class="box" @click="clickDownLoad">
					<uni-icons type="download" size="23"></uni-icons>
					<view class="text">下载</view>
				</view>
			</view>
		</view>


		<!-- 弹框 -->
		<uni-popup ref="infoPopup" type="bottom">

			<view class="infoPopup">

				<view class="popHeader">
					<view></view>
					<view class="title">壁纸信息</view>
					<view class="close" @click="close">
						<uni-icons type="closeempty" size="18" color="#999"></uni-icons>
					</view>
				</view>


				<!-- 内容 -->
				<scroll-view scroll-y>
					<view class="content">

						<view class="row">
							<view class="label">发布者：</view>
							<view class="value">{{goods.nickname}}</view>
						</view>

						<view class="row">
							<view class="label">分类：</view>
							<view class="value class">{{goods.categoryName}}</view>
						</view>

						<view class="row">
							<view class="label">评分：</view>
							<view class="value rotBox">
								<uni-rate v-model="goods.score" readonly touchable size="16"></uni-rate>
								<text class="score">{{goods.score}}分</text>
							</view>
						</view>

						<view class="row">
							<view class="label">摘要：</view>
							<view class="value">{{goods.description}}</view>
						</view>

						<view class="row">
							<view class="label">标签：</view>
							<view class="value tabs">
								<view v-for="item in goods.tabs" :key="item" class="tab">{{item}}</view>
							</view>
						</view>

						<view class="copyright">
							<view class="copyright-title">版权声明</view>
							<view class="copyright-content">
								声明：本图片来源于网络上，非商业使用，用于免费学习交流，如侵犯了您的权益，直接联系管理员，邮箱3207271617@qq.com
								,管理员将其删除侵权的壁纸，维护您的权益
							</view>
							<view class="copyright-version">版本：1.0.0 | 更新日期：2025-08-21</view>
						</view>

					</view>
				</scroll-view>


			</view>

		</uni-popup>

		<uni-popup ref="scorePopup" type="center">

			<view class="scorePopup">
				<view class="popHeader">
					<view></view>
					<view class="title">{{ scoreData?.length ? "该壁纸已评分" : "壁纸评分" }}</view>
					<view class="close" @click="closeScore">
						<uni-icons type="closeempty" size="18" color="#999"></uni-icons>
					</view>
				</view>


				<view class="content">
					<uni-rate :disabled="scoreData?.length" v-model="goods.score" @change="onchange"></uni-rate>
					<text class="text">{{goods.score}}分</text>
				</view>


				<view class="fotter">
					<button :disabled="scoreData?.length" type="default" size="mini" plain=""
						@click="submitScore">{{ scoreData?.length ? "已评分" : "确认评分" }}</button>
				</view>

			</view>

		</uni-popup>


	</view>
</template>

<script setup>
	import {
		onLoad,
		onShow
	} from "@dcloudio/uni-app"

	import {
		fixMinioUrl
	} from "@/utils/img-url.js"

	import {
		apiGetGoods,
		apiGoodsScore,
		apiUpdateScore,
		apiGetScore,
		apiWriteDownload
	} from "@/api/apis.js"
	import {
		ref
	} from "vue"

	import {
		getStatusBarHeight
	} from "@/utils/system.js"


	const infoPopup = ref()
	const scorePopup = ref()
	const goodsId = ref(null)

	onLoad((options) => {
		getGoodsDetails(options.id)
		loadScore(options.id)

		goodsId.value = options.id

	})


	//初始化数据
	const goods = ref({})
	const getGoodsDetails = async (id) => {
		const res = await apiGetGoods(id)

		goods.value = res.data

		if (goods.value.tabs) {
			goods.value.tabs = JSON.parse(goods.value.tabs)
		}
	}


	// 点击图片值显示图片
	const maskState = ref(true)
	const maskChange = () => {
		maskState.value = !maskState.value
	}

	const goBack = () => {
		uni.navigateBack()
	}


	// 弹框
	const clickInfo = () => {
		infoPopup.value.open()
	}

	const clickScore = () => {
		scorePopup.value.open()
	}

	//关闭弹框

	const close = () => {
		infoPopup.value.close()
	}

	const closeScore = () => {
		scorePopup.value.close()
	}

	//评分功能
	const score = ref(0)
	const scoreData = ref()

	const onchange = (e) => {
		score.value = e.value
	}

	let user;
	// #ifdef MP
	user = uni.getStorageSync("userInfo")
	// #endif

	// #ifndef MP
	user = JSON.parse(uni.getStorageSync("userInfo") || "{}");

	// #endif


	const submitScore = async () => {

		let token;

		// #ifdef MP
		token = uni.getStorageSync('token')
		// #endif

		// #ifndef MP
		token = user.token
		// #endif



		if (!token) {
			uni.showToast({
				title: '请登录',
				icon: 'none'
			})
			return
		}

		const updateScore = {
			id: goods.value.id,
			score: score.value.toString(),
		}

		const res = await apiGoodsScore(updateScore)

		if (res.code === "200") {
			uni.showToast({
				title: "评分成功",
				icon: "none"
			})
		}

		const goodsIdInt = parseInt(goodsId.value, 10);
		const scoreRes = {
			goodsId: goodsIdInt,
			userId: user.id
		}

		const scoreiRes = await apiUpdateScore(scoreRes)

		console.log(scoreiRes)

		closeScore()

		loadScore(goodsIdInt)

	}

	const loadScore = async (id) => {
		const scoreRes = {
			goodsId: id,
			userId: user.id
		}

		const res = await apiGetScore(scoreRes)

		scoreData.value = res.data


	}

	// 下载功能

	const clickDownLoad = async (id) => {

		const token = uni.getStorageSync('token')

		if (!token) {
			uni.showToast({
				title: '请登录',
				icon: 'none'
			})
			return
		}

		// #ifdef H5
		uni.showModal({
			content: "请长按保存图片",
			showCancel: false
		})

		// #endif

		// #ifndef H5
		/**
		 * 1.先调用getImageInfo获取到临时地址‘
		 * 2.在调用saveImageToPhotosAlbum将图片下载到本地
		 */

		uni.showLoading({
			title: "下载中",
			mask: true
		})

		const user = uni.getStorageSync("userInfo")
		const download = {
			goodsId: goods.value.id,
			userId: user.id
		}
		const res = await apiWriteDownload(download)

		uni.getImageInfo({
			src: goods.value.smallPicurl,
			success: async (info) => {
				// 1. 把 .bin 临时路径复制一份带 .jpg 后缀的临时文件
				const fs = uni.getFileSystemManager();
				const newPath = `${wx.env.USER_DATA_PATH}/downloaded_${Date.now()}.jpg`;
				fs.copyFileSync(info.path, newPath);

				// 2. 保存到相册
				uni.saveImageToPhotosAlbum({
					filePath: newPath,
					success: () => {
						uni.showToast({
							title: '保存成功',
							icon: 'none'
						});
					},
					fail: (err) => {
						if (err.errMsg.includes('cancel')) {
							uni.showToast({
								title: '已取消',
								icon: 'none'
							});
						} else if (err.errMsg.includes('auth')) {
							uni.showModal({
								title: '提示',
								content: '需要授权保存到相册',
								success: (res) => {
									res.confirm && uni.openSetting();
								}
							});
						} else {
							uni.showToast({
								title: '保存失败：' + err.errMsg,
								icon: 'none'
							});
						}
					},
					complete: () => uni.hideLoading()
				});
			},
			fail: () => {
				uni.showToast({
					title: '获取图片信息失败',
					icon: 'none'
				});
				uni.hideLoading();
			}
		});

		// #endif

	}
</script>

<style lang="scss" scoped>
	.preview {
		width: 100%;
		height: 100vh;
		position: relative;
		background-color: #000;

		image {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}

		.mask {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.3) 100%);

			&>view {
				position: absolute;
				left: 0;
				margin: auto;
				color: #fff;
				right: 0;
				width: fit-content;
				text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
			}

			.goBack {
				width: 38px;
				height: 38px;
				background: rgba(0, 0, 0, 0.5);
				left: 30rpx;
				margin-left: 0;
				border-radius: 100px;
				top: 0;
				backdrop-filter: blur(10rpx);
				border: 1rpx solid rgba(255, 255, 255, 0.3);
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.time {
				font-size: 140rpx;
				top: calc(10vh + 80rpx);
				font-weight: 200;
				letter-spacing: 2rpx;
			}

			.date {
				font-size: 34rpx;
				top: calc(10vh + 230rpx);
				margin-top: 30rpx;
				font-weight: 300;
				opacity: 0.9;
			}

			.footer {
				background: rgba(255, 255, 255, 0.9);
				bottom: 10vh;
				width: 70vw;
				height: 120rpx;
				border-radius: 60rpx;
				color: #333;
				display: flex;
				justify-content: space-around;
				align-items: center;
				box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.15);
				backdrop-filter: blur(20rpx);
				transition: all 0.3s ease;

				.box {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					padding: 2rpx 12rpx;
					transition: transform 0.2s;

					&:active {
						transform: scale(0.95);
					}

					.text {
						font-size: 26rpx;
						color: #666;
						margin-top: 8rpx;
					}
				}
			}
		}

		.infoPopup {
			background: #fff;
			padding: 30rpx;
			border-radius: 30rpx 30rpx 0 0;
			overflow: hidden;
			box-shadow: 0 -10rpx 30rpx rgba(0, 0, 0, 0.1);

			.popHeader {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding-bottom: 20rpx;
				border-bottom: 1rpx solid #f5f5f5;
				margin-bottom: 30rpx;

				.title {
					font-size: 36rpx;
					font-weight: 600;
					color: #333;
				}

				.close {
					padding: 16rpx;
					border-radius: 50%;
					background: #f5f5f5;
				}
			}

			scroll-view {
				max-height: 70vh;

				.content {
					padding-bottom: 40rpx;

					.row {
						display: flex;
						padding: 24rpx 0;
						font-size: 32rpx;
						line-height: 1.6em;
						border-bottom: 1rpx solid #f5f5f5;

						.label {
							color: #999;
							width: 140rpx;
							text-align: right;
							font-size: 28rpx;
							font-weight: 400;
						}

						.value {
							flex: 1;
							width: 0;
							color: #333;
							font-weight: 400;
							padding-right: 30rpx;
						}

						.rotBox {
							display: flex;
							align-items: center;

							.score {
								font-size: 26rpx;
								color: #ffb400;
								padding-left: 20rpx;
								font-weight: 500;
							}
						}

						.tabs {
							display: flex;
							flex-wrap: wrap;
							gap: 12rpx;

							.tab {
								border: 1rpx solid $brand-theme-color;
								color: $brand-theme-color;
								font-size: 24rpx;
								padding: 8rpx 24rpx;
								border-radius: 30rpx;
								background: rgba($brand-theme-color, 0.1);
							}
						}

						.class {
							color: $brand-theme-color;
							font-weight: 500;
						}
					}

					.copyright {
						margin-top: 50rpx;
						padding: 30rpx;
						background: #f9f9f9;
						border-radius: 16rpx;

						&-title {
							font-size: 32rpx;
							color: #333;
							font-weight: 600;
							margin-bottom: 20rpx;
						}

						&-content {
							font-size: 26rpx;
							color: #666;
							line-height: 1.6;
							margin-bottom: 20rpx;
						}

						&-version {
							font-size: 24rpx;
							color: #999;
							text-align: center;
						}
					}
				}
			}
		}

		.scorePopup {
			background: #fff;
			width: 80vw;
			border-radius: 24rpx;
			padding: 40rpx;
			box-shadow: 0 10rpx 50rpx rgba(0, 0, 0, 0.15);

			.popHeader {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 40rpx;

				.title {
					font-size: 36rpx;
					font-weight: 600;
					color: #333;
					text-align: center;
					flex: 1;
				}

				.close {
					padding: 16rpx;
					border-radius: 50%;
					background: #f5f5f5;
				}
			}

			.content {
				display: flex;
				flex-direction: column;
				align-items: center;
				margin-bottom: 40rpx;

				.uni-rate {
					margin-bottom: 20rpx;
				}

				.text {
					font-size: 32rpx;
					color: #ffb400;
					font-weight: 500;
					margin-top: 20rpx;
				}
			}

			.fotter {
				display: flex;
				justify-content: center;

				button {
					background: $brand-theme-color;
					color: #fff;
					border: none;
					width: 200rpx;
					height: 70rpx;
					line-height: 70rpx;
					border-radius: 35rpx;
					font-size: 28rpx;
					box-shadow: 0 4rpx 12rpx rgba($brand-theme-color, 0.3);
					transition: all 0.3s;

					&:active {
						transform: scale(0.95);
						opacity: 0.9;
					}
				}
			}
		}
	}
</style>